<template>
  <div class="list-view">
    <list-view-top :playlist="state.playlist"></list-view-top>
    <play-list :playlist="state.playlist"></play-list>
  </div>
</template>

<script>
import { getCurrentInstance, reactive } from 'vue'
import { useRoute } from 'vue-router'
import ListViewTop from '../components/ListViewTop.vue'
import PlayList from '../components/PlayList.vue'

export default {
  setup() {
    const state = reactive({ list: [], playlist: { creator: {}, tracks: [] } })
    const { proxy } = getCurrentInstance()
    const route = useRoute()

    proxy.$http.get(`/playlist/detail?id=${route.query.id}`).then(res => {
      console.log(res)
      state.list = res.privileges
      state.playlist = res.playlist
    })

    return {
      state
    }
  },
  components: {
    ListViewTop,
    PlayList
  }
}
</script>

<style lang="less" scoped>
.list-view {
  width: 7.5rem;
}
</style>